﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MovieSelection.aspx.cs" Inherits="main_MovieSelection" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>电影选择</title>
    <style>
        /* 原有样式保持不变 */
        .movie-container { width: 90%; margin: 20px auto; font-family: 'Microsoft YaHei', sans-serif; }
        .movie-scroll-container { position: relative; overflow: hidden; margin-bottom: 30px; }
        .movie-list {
            display: flex;
            overflow-x: auto;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 10px 0;
        }
        .movie-list::-webkit-scrollbar { display: none; }
        .movie-item { flex: 0 0 180px; margin: 0 15px; cursor: pointer; text-align: center; transition: all 0.3s; }
        .movie-item:hover { transform: translateY(-5px); }
        .movie-poster { width: 180px; height: 250px; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
        .movie-title { margin-top: 10px; font-size: 16px; color: #333; }
        .scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 60px; background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; border-radius: 3px; }
        .arrow-left { left: 0; }
        .arrow-right { right: 0; }
        .date-selector { display: flex; justify-content: center; margin: 20px 0; }
        .date-item { padding: 10px 20px; margin: 0 5px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer; transition: all 0.3s; }
        .date-item:hover, .date-item.active { background: #e54847; color: white; border-color: #e54847; }
        .schedule-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        .schedule-table th { background: #f5f5f5; padding: 12px; text-align: left; }
        .schedule-table td { padding: 12px; border-bottom: 1px solid #eee; }
        .book-btn { background: #e54847; color: white; border: none; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
        .book-btn:hover { background: #c43837; }
        
        /* 新增电影介绍区域样式 */
        .movie-info-container {
            width: 90%;
            margin: 20px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-left: 4px solid #e54847;
            display: none; /* 初始隐藏 */
        }
        .movie-info-header {
            margin-bottom: 15px;
        }
        .movie-tagline {
            color: #666;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 5px;
            font-style: italic;
        }
        .movie-info-main {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .movie-title {
            font-size: 22px;
            color: #333;
            margin: 0;
            margin-right: 15px;
            font-weight: bold;
        }
        .movie-rating {
            font-size: 18px;
            color: #ff9900;
            display: flex;
            align-items: center;
        }
        .rating-value {
            font-size: 24px;
            font-weight: bold;
            margin-right: 5px;
        }
        .movie-info-details {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
        }
        .movie-info-details p {
            margin: 5px 0;
        }
        .movie-poster-large {
            width: 100%;
            max-width: 300px;
            height: auto;
            border-radius: 4px;
            margin: 10px auto;
            display: block;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <!-- 修改电影数据源，添加更多字段 -->
        <asp:SqlDataSource ID="sqlDataSourceMovies" runat="server" 
            ConnectionString="<%$ ConnectionStrings:MovieDBConnectionString %>"
            SelectCommand="SELECT [MovieID], [Title], [PosterUrl], [Rating], [Duration], [Genre], [Actors] FROM [Movies]" 
            ProviderName="System.Data.SqlClient">
        </asp:SqlDataSource>
        
        <!-- 排片数据源保持不变 -->
       <asp:SqlDataSource ID="sqlDataSourceSchedules" runat="server"
    ConnectionString="<%$ ConnectionStrings:MovieDBConnectionString %>"
    SelectCommand="SELECT H.hall_id, H.hall_number, H.start_time, H.end_time, H.price, H.language_version 
                  FROM Halls H 
                  WHERE H.movie_name = @MovieName AND CONVERT(DATE, GETDATE()) = @ShowDate">
    <SelectParameters>
        <asp:Parameter Name="MovieName" Type="String" />
        <asp:Parameter Name="ShowDate" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

        <div class="movie-container">
            <!-- 电影横向滑动列表保持不变 -->
            <div class="movie-scroll-container">
                <div class="scroll-arrow arrow-left" onclick="scrollMovies(-1)">❮</div>
                <div class="movie-list" id="movieList">
                    <asp:Repeater ID="rptMovies" runat="server" DataSourceID="sqlDataSourceMovies">
                        <ItemTemplate>
                            <div class="movie-item" onclick="selectMovie('<%# Eval("MovieID") %>')">
                                <img src='<%# Eval("PosterUrl") %>' class="movie-poster" alt='<%# Eval("Title") %>' />
                                <div class="movie-title"><%# Eval("Title") %></div>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div class="scroll-arrow arrow-right" onclick="scrollMovies(1)">❯</div>
            </div>
            
            <!-- 新增电影介绍区域 -->
            <div class="movie-info-container" id="movieInfoContainer" runat="server">
                <div class="movie-info-header">
                    <h2 class="movie-tagline" id="movieTagline" runat="server"></h2>
                    <div class="movie-info-main">
                        <h3 class="movie-title" id="movieTitle" runat="server"></h3>
                        <div class="movie-rating">
                            <span class="rating-value" id="movieRating" runat="server"></span>分
                        </div>
                    </div>
                </div>
                <div class="movie-info-details">
                    <p>时长：<span id="movieDuration" runat="server"></span>分钟</p>
                    <p>类型：<span id="movieGenre" runat="server"></span></p>
                    <p>主演：<span id="movieActors" runat="server"></span></p>
                </div>
            </div>
            
            <!-- 日期选择保持不变 -->
            <div class="date-selector">
                <asp:Repeater ID="rptDates" runat="server">
                    <ItemTemplate>
                        <div class="date-item <%# Container.ItemIndex == 0 ? "active" : "" %>" 
                            onclick="selectDate('<%# Eval("DateValue") %>', this)">
                            <%# Eval("DisplayText") %>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            
            <!-- 放映信息保持不变 -->
            <asp:GridView ID="gvSchedules" runat="server" CssClass="schedule-table" 
    DataSourceID="sqlDataSourceSchedules" AutoGenerateColumns="False"
    OnRowCommand="gvSchedules_RowCommand">
    <Columns>
        <asp:BoundField DataField="hall_number" HeaderText="放映厅" />
        <asp:TemplateField HeaderText="放映时间">
    <ItemTemplate>
        <%# FormatTimeRange(Eval("start_time"), Eval("end_time")) %>
    </ItemTemplate>
</asp:TemplateField>
        
        <asp:BoundField DataField="language_version" HeaderText="语言版本" />
        <asp:BoundField DataField="price" HeaderText="售价(元)" DataFormatString="{0:C}" />
        <asp:TemplateField HeaderText="操作">
            <ItemTemplate>
                <asp:Button ID="btnBook" runat="server" Text="选座购票" CssClass="book-btn"
    CommandName="Book" 
    CommandArgument='<%# string.Format("{0}|{1}|{2}|{3}", Eval("hall_id"), Eval("hall_number"), Eval("start_time"), Eval("end_time")) %>'
    OnCommand="btnBook_Command" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate>
        <tr><td colspan="5" style="text-align:center;">请先选择电影和日期</td></tr>
    </EmptyDataTemplate>
</asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server"></asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"></asp:SqlDataSource>
        </div>
    </form>
    
    <script type="text/javascript">
        // 横向滑动电影列表
        function scrollMovies(direction) {
            const movieList = document.getElementById('movieList');
            const scrollAmount = 300;
            movieList.scrollBy({ left: scrollAmount * direction, behavior: 'smooth' });
        }

        function selectMovie(movieId) {
            var container = document.getElementById('<%= movieInfoContainer.ClientID %>');
            container.style.display = 'block';

            var form = document.forms[0];
            var target = document.createElement("input");
            var argument = document.createElement("input");

            target.name = "__EVENTTARGET";
            target.type = "hidden";
            target.value = "";

            argument.name = "__EVENTARGUMENT";
            argument.type = "hidden";
            argument.value = "SelectMovie:" + movieId;

            form.appendChild(target);
            form.appendChild(argument);
            form.submit();
        }


        // 选择日期
        function selectDate(dateValue, element) {
            document.querySelectorAll('.date-item').forEach(item => {
                item.classList.remove('active');
            });
            element.classList.add('active');
            __doPostBack('', 'SelectDate:' + dateValue);
        }
    </script>
</body>
</html>